<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>组件通信__自定义事件使用v-model</title>
</head>
<body>

<div id="app">
    <p>总数是：{{ total }}</p>
   <my-component v-model="total"></my-component>
</div>

<hr>

<div id="app1">
    <p>总数是：{{ total }}</p>
    <my-component1 @input="handleGetTotal"></my-component1>
</div>

<hr>

<div id="app2">
    <input type="text " v-model="message">
    <p>{{message }}</p>
</div>

<hr>

<div id="app3">
    <p>app3总数：{{ total }}</p>
    <my-component2 v-model="total"></my-component2>
    <button @click="handleReduce">-1</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     *
     * V2.x允许你在自定义事件上使用v-model
     *
     **/

     Vue.component("my-component",{
         template:"<button type='button' @click='handleClick'>+1</button>",
         data:function () {
             return {
                 counter:0,
             }
         },
         methods:{
             handleClick:function () {
                 this.counter++;
//注意一下，这里使用了特殊的input，那么就可以直接使用v-model来进行数据绑定，不需要再在<my-component>上使用@input="handler"，这也是一个语法糖。
                 this.$emit('input',this.counter);
             }
         }
     });
    var app = new Vue({
        el:"#app",
        data:{
            total:0
        }
    });


    Vue.component("my-component1",{
        template:"<button type='button' @click='handleReduce'>-1</button>",
        data:function () {
            return {
                counter:10  //数据从此开始运算
            }
        },
        methods:{
            handleReduce:function () {
                this.counter--;
                this.$emit('input',this.counter)
            }
        }
    });
    var app1 = new Vue({
        el:"#app1",
        data:{
            total:10  //此处只是初始值
        },
        methods:{
            handleGetTotal:function (total) {  //这里的total其实就是前面this.$emit('input',this.counter)中的this.counter
                this.total = total;
            }
        }
    });

    //v-model实现数据的双向绑定
    var app2=  new Vue({
        el:"#app2",
        data:{
            message:"",
        }
    });





    //v-model还可以用来创建自定义的表单输入组件，从而进行数据的双向绑定
    //注意，实现这样一个具有双向绑定的v-model组件需要满足下面两个要求：1、接收一个value属性；2、找到新的value时触发input事件。

    Vue.component("my-component2",{
        template:"<input type='text' :value='value' @input='updateValue'>",
        methods:{
            updateValue:function (event) {
                this.$emit('input',event.target.value);
            }
        }
    });
    var app3 = new Vue({
        el:"#app3",
        data:{
            total:0
        },
        methods:{
            handleReduce:function () {
                this.total--;
            }
        }
    })
</script>
</body>
</html>